<script setup>
import Layout from '../Layout/index.vue'
import { useRouter, useRoute } from 'vue-router';   
const router = useRouter(); 
const route = useRoute();
const  routerList = ref([
    {   
        id: 0,
        name: 'upload',
        title: '首页',
        path: '',
    },
    {   
        id: 1,
        name: 'upload',
        title: '上传',
        path: '/upload',
    },
    {
        id: 2,
        name: 'voice',
        title: '语音识别',
        path: '/voice',
    },
    {
        id: 3,
        name: 'styles',
        title: '动画样式',
        path: '/styles',
    },
    {
        id:4 ,
        name: 'hickey',
        title: '接口测试',
        path: '/hickey'
    },
]);
const activeNav = ref()
const handleClick = (item) => {
    activeNav.value = item.id
    router.push(item.path);
}
onMounted(()=>{
    activeNav.value = routerList.value[0].id
    localStorage.setItem('appId','1b5c3d05')
    localStorage.setItem('apiKey','afcbb1b0c78871d69155ab87cc2eaf29')
    localStorage.setItem('apiSecret','NjQ1NDRlZTIxZjU5YWU4NzU4NzMyYjZl')
})

</script>

<template>
    <Layout class="layout">
        <template #header>
            <h1 class="w-full h-40px lh-40px bg-#f0f0f0 text-24px font-bold pl-20px box-border">首页</h1>
        </template> 
        <template #sidebar>
            <div class="flex flex-col h-full">
                <ul class="w-full h-full flex flex-col">
                    <li :class="['h-40px lh-40px text-center cursor-pointer shadow-[0px_1px_1px_#ccc] hover:bg-#ccc', {'bg-#ccc': activeNav === item.id}]"
                    v-for="item in routerList" :key="item.id" @click="handleClick(item)">{{ item.title }}</li>
                </ul>
            </div>
        </template>
        <template #main>
            <router-view></router-view>
        </template>
    </Layout>

</template>


<style lang="scss" scoped>
.layout{
    :deep(.layout-container){
        .layout-sidebar{
            margin-top: 10px;
            height: calc(100% - 10px);
        }
    }
}
</style>